<template>
  <div>
    <div class="prev_img_win" v-if="is_show">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in list" :key="index">
            <div class="swiper-zoom-container">
              <img :src="item" alt="">
            </div>

          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
      <a href="javascript:;" class="close_btn flex_ac_jc" @click="is_show=false"><i class="el-icon-close"></i></a>
      <div class="tips flex_ac_jc">提示：双击放大后可鼠标拖动</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'prott',
  data () {
    return {
      list:[],
      is_show:false
    }
  },
  created() {

  },
  methods:{
    init(arr,index){
      this.is_show=true;
      this.list=arr;
      console.log(index)
      this.$nextTick(()=>{
        var swiper = new Swiper(".mySwiper", {
          zoom: true,
          // loop:true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          initialSlide:index || 0
        });
      })
    },
    get_data(){

    },
  }
}
</script>
<style>
  .prev_img_win{position: fixed;width: 100%;height: 100%;left: 0;top: 0; z-index: 200;background: rgba(0,0,0,0.8);}
  .swiper {
    width: 100%;
    height: 100%;
   }
   .swiper-slide img{user-select: none;}
   .swiper-slide {
       overflow: hidden;
     }
   .close_btn{background: rgba(0,0,0,0.4);color: #fff; z-index: 20;font-size: 20px;width: 30px;height: 30px;position: absolute; right:20px;top: 20px;}
   .tips{padding:0 30px;position: absolute;left: 0;top: 0; z-index: 20;background:rgba(0,0,0,0.4);color: #fff;font-size: 20px; line-height:60px}
</style>
